<template>
  <div class="my container">
	<header>
        <div v-if='userStatus' class='user-info'>
            <img :src="userInfo.imgUrl" alt="">
            <span>{{userInfo.nickName}}</span>
        </div>
        <div v-else @click='goLogin' class='login-text'>登录 / 注册</div>
    </header>
    <section>
        <ul>
            <li @click='$router.push("/path")'>地址管理</li>
            <li v-if='userStatus' @click='loginOut'>退出登录</li>
        </ul>
    </section>
	<Tabbar></Tabbar>
  </div>
</template>
<script>
import Tabbar from '@/components/common/Tabbar.vue'
import {mapState,mapMutations} from 'vuex'
export default{
    computed:{
      ...mapState({
          userStatus:state=>state.user.userStatus,
          userInfo:state=>state.user.userInfo
      })  
    },
    methods:{
        ...mapMutations(['loginOut']),
        goLogin(){
            this.$router.push('/login')
        }
    },
	components:{
		Tabbar
	}
}
</script>

<style scoped lang='scss'>
header{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 4.16rem;
    width: 100%;
    background-color: #B24C49;
    .login-text{
        padding:0.16rem 0.266666rem;
        font-size:0.426666rem;
        color:#fff;
        background-color: #F6AB32;
        border-radius: 6px;
    }
    .user-info{
        display: flex;
        flex-direction: column;
        align-items: center;
        color:#fff;
        img{
            width: 1.76rem;
            height: 1.76rem;
            border-radius: 50%;
        }
        span{
            padding:0.266666rem 0;
            font-size: 0.48rem;
        }
    }
}
section{
    ul{
        li{
            padding:0.533333rem;
            margin:0.266666rem;
            font-size:0.426666rem;
        }
    }
}
::v-deep .tabbar{
    border-top:2px solid #ccc;
}
</style>